<template>
  <div class="mdui-container">
    <br>
    <h2>轮播图添加</h2>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">图片</label>
      <br>
      <img :src="this.image_url" width="200px" onclick="document.getElementById('imgup2').click()">
      <input id="imgup2" type="file" @change="up" accept="image/*" name="imgUrls" value="file1" style="visibility: hidden">
    </div>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">商品id</label>
      <input class="mdui-textfield-input" type="text" v-model="commodity_id"/>
    </div>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">展示权重(默认100)</label>
      <input class="mdui-textfield-input" type="text" v-model="weight"/>
    </div>
    <br>
    <br>
    <button class="mdui-btn mdui-float-right" v-on:click="add">添加</button>
    <div class="mdui-dialog" id="roll_image_add_dialog">
      <div class="mdui-dialog-title">图片上传</div>
      <div class="mdui-dialog-content">
        {{press}}
      </div>
    </div>
  </div>
</template>

<script>
  import * as mdui from "mdui";
  import axios from "axios";
  import qs from "qs";
  import jm from "./../../static/jm"

  const BASE_URL = 'http://127.0.0.1:8886';
  export default {
    name: 'login',
    data () {
      return {
        weight:'',
        commodity_id:'',
        image_id:'',
        image_url:'static/add2.jpg',
        press:'0%'
      }
    },
    methods:{
      get_image(id){
        return BASE_URL+"/images/big/"+id+".jpg";
      },
      up(i){
        this.inst.open();
        let file = i.path[0].files[0];

        let ff = new FormData();
        ff.append("uploadedfile",file);
        this.token=window.localStorage.getItem("token");
        this.press='0%';

        axios.post(BASE_URL+'/images/up',ff,
          {'headers': {'Content-Type': 'multipart/form-data'},
            onUploadProgress: progressEvent => {
              this.press = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
              if((progressEvent.loaded / progressEvent.total * 100 | 0) ==100)
                this.image_url='static/loading.jpg';

            }})
          .then(re => {
            console.log(re)
            this.inst.close();
            this.image_url=re.data.big;
            console.log(this.image_url);
            this.image_id=re.data.id;
            
          })
          .catch(err=>{
            this.inst.close();
            mdui.default.alert("网络错误");

          });




      },
      add(){
        if(!this.commodity_id)
        {
          mdui.default.alert("请输入商品id");
          return;
        }
        if(!this.weight)
        {
          mdui.default.alert("请输入权重");
          return;
        }
        this.token=window.localStorage.getItem("token");
        axios.post(BASE_URL +'/roll_image/add_roll_image',
          qs.stringify({token:this.token,image_url:this.image_id,weight:this.weight,commodity_id:this.commodity_id}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {
              this.$router.push("/roll_image_list");

            }
            else
            {
              if(re.data.备注==='token无效') {
                this.token = window.localStorage.setItem("token", "");
                this.$router.push("/login");
              }
              else
                mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            mdui.default.alert("网络错误");

          });


      }
    },
    mounted() {
      this.inst = new mdui.default.Dialog('#roll_image_add_dialog');
    }
  }
</script>
